import { reactive, ref, onMounted, computed, watch, type ComputedRef  } from 'vue';
//import { mapGetters, mapState } from 'vuex';
import { getSourceList, getJoinSignApproval } from '@/api/plan.ts';
import { planStatus as planStatusList } from '@/utils/config.ts';
import { setupMapGetters } from '@/hooks/useSetupMapFn';
import { getProvinceAndCityFromRigions, getNearEstDate } from '@/utils/common';
import { useStore } from 'vuex'
import { debounce } from 'lodash';
export default  function useFormColumns(handleSearch: () => void, handleResetForm: () => void) {
    const store =  useStore();
    const cityListState = computed<{city: string, cityCode: string | number}[]>(() => store.state.userGroup.userInfo?.cityList);
    const groupCode = computed(() => store.state.userGroup.userInfo?.groupCode);
    const cityList  = computed(() => cityListState.value.map(item => ({
        label:item.city,
        value:item.cityCode
    })))
    const loading = ref(false);
    const showCancelList = ref(false);


    const signList = ref([])
   // const regionList: any = computed(() => getProvinceAndCityFromRigions(store.state.app.common.CommonList.regionList));
    const sourceList = ref([])
    const planList = ref([])
    const querySignList = debounce(async (keywords = null): Promise<void> => {
        const params = {
            joinTraderCode: groupCode.value,
            size: 10,
            keywords,
        };
        loading.value = true;
        try {
            const data = await getJoinSignApproval(params) || [];

            signList.value = data.map((item) => ({
                value: item.applyCode,
                label: `${item.brandName}-${item.applyCode}`,
            }));
        } finally {
            loading.value = false;
        }
    }, 200);



    onMounted(async () => {
        const data = await getSourceList();
        sourceList.value = data.map(({ code, name }: {code: string, name: string}) => ({
            label:name,
            value:code
        }));
        const temp = sourceList.value.find(({ value } )=> value !== '010')
        if(temp) {
            formData.planSource = temp.value
        }

        handleSearch()
    })

    const columns = computed(() => [
        {
            label: '',
            prop: 'planName',
            type: 'input',
            attr: {

                clearable: true,
                placeholder: '搜索方案名称',
                class:'search',
            },
            slotName: 'prefix',
        },
        {
            label: '',
            prop: 'city',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',

            },
            options:cityList.value,
            on:{
                change:(cityCode: number | string) => {
                    store.commit('plan/setSelectedCity', cityCode)
                }
            },
            slotName: 'prefix',

        },
        {
            label: '',
            prop: 'beginDate',
            render: () => (
                    <el-date-picker

                        class="begin-date"
                        v-model={formData.beginDate}
                        type="date"
                        placeholder="选择日期"
                        value-format="YYYY-MM-DD"
                    >

                    </el-date-picker>
                )
        },
        {
            label: '',
            prop:'publishDate',
            render: () => (
                    <el-date-picker
                        class="publish-date"
                        v-model={formData.publishDate}
                        type="date"
                        placeholder="选择日期"
                        value-format="YYYY-MM-DD"
                    />
                )
        },
        {
            label: '',
            prop: 'planSource',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                placeholder: '请选择',
            },
            slotName: 'prefix',
            options: sourceList,
        },
        {
            label: '',
            prop: 'planStatusList',
            type: 'select',
            attr: {
                filterable: true,
                clearable: true,
                multiple: true,
                collapseTags: true,
                placeholder: '请选择',
                disabled:showCancelList.value,
            },
            slotName: 'prefix',
            options: planStatusList,
        },
        {
            label: '',
            prop: 'orderId',
            type: 'select',
            attr: {
                clearable: true,
                placeholder: '签约单',
                class:'search',
                remote:true,
                filterable:true,
                remoteMethod:querySignList,
                loading:loading.value,
                loadingText: '数据请求中。。。',
            },
            slotName: 'prefix',
            options:signList.value
        },
        {
            render: () =>  (
                    <>
                        <el-button  plain onClick={resetForm} >重置</el-button>
                        <el-button type="primary" onClick={handleSearch}>
                            查询
                        </el-button>
                    </>
                )

        },
    ]);
    const resetForm = () => {
        handleResetForm()
        const temp = sourceList.value.find(({ value } )=> value !== '010')
        if(temp) {
            formData.planSource = temp.value
        }
    }
    const formData = reactive(
        {
            planName: '',
            city: cityList.value[0]?.value,
            beginDate: getNearEstDate(),
            publishDate:'',
            planStatusList:'',
            planStatus:'',
            orderId:'',
            mediaType:1  //媒体类型
        }
    );

    watch(
        () => showCancelList.value,
        (val) => {
            store.commit('plan/setDeleted', showCancelList.value);
            if (val) {
                formData.planStatusList = '';
            }
        }
    );

    return {
        formData,
        columns,
        sourceList,
        showCancelList
    };
}
